import ReduxUsePage from "./ReduxUsePage";
import ReactReduxPage from "./ReactReduxPage";
import HookReactReduxPage from "./HookReactReduxPage";
// import { Provider } from "react-redux";
import { Provider } from "../../kreactRedux/index";
import store from "../../store";
import React, { useState } from "react";
export default function ReduxPage() {
      let [show, setShow] = useState(true);
      let [showPage, setShowPage] = useState("ReduxUsePage");
      return (
            <div className="redux-page-wrapper">
                  <button onClick={() => {setShowPage("ReduxUsePage")}}>ReduxUsePage</button>
                  <button onClick={() => {setShowPage("ReactReduxPage")}}>ReactReduxPage</button>
                  <button onClick={() => {setShowPage("HookReactReduxPage")}}>HookReactReduxPage</button>
                  <hr></hr>
                  <button onClick={() => setShow(!show)}>{show ? "卸载" : "显示"}组件</button>

                  <Provider store={store}>
                        {show && showPage === "ReduxUsePage" ? <ReduxUsePage></ReduxUsePage> : null}
                        {show && showPage === "ReactReduxPage" ? <ReactReduxPage></ReactReduxPage> : null}
                        {show && showPage === "HookReactReduxPage" ? (<HookReactReduxPage></HookReactReduxPage>) : null}
                  </Provider>
            </div>
      );
}
